<template>
  <section class="c-head-wrap" :class="[{'on':scrollY >=70},store.isIPhone?'m':'pc']">
    <div class="content-box">
      <div class="back-box"></div>
      <div  class="head-box">
        <section class="main g-width-box g-cen-y">
          <div class="logo-box" >
            <div>demo logo</div>
          </div>
          <div 
            class="nav-btn-box "
          >
            <div class="g-dis">
              <div
                v-for="(m, i) in navArr"
                :key="i"
                class="btn"
                ref="btnId"
                @click="routerFn(m)"
                :class="[isPageFn(m,i),{'hover':isChildren == m.path}]"
              >
                <h6>{{ $t(`HEAD.${m.name}`) }}</h6>
                <div v-show="m.children && async" class="children-box">
                  <div 
                    class="item" 
                    v-for="(n,ind) in m.children" 
                    :key="i+'-'+ind" 
                    :class="[isPath == n.path && 'on']"
                    @click.stop="routerFn(n)"
                  >
                  {{ $t(`HEAD.${n.name}`) }}
                  </div>
                </div>
              </div>
            </div>
            <div class="border" :style="isStyle"></div>
          </div>
          <div 
            class="locale-box g-cen-y" 
            @click="localeFn"
            :class="[{'hover':isChildren == 'locale'}]"
          >
            <i class="icon1"></i>
            <span>{{ store.localeName}}</span>
            <i class="icon2"></i>

            <div  class="children-box" v-show="async ">
                <div 
                  class="item" 
                  v-for="n in store.localeArr" 
                  :key="n.id" 
                  :class="[store.locale == n.id && 'on']"
                  @click.stop="change(n.id)"
                >
                  {{ n.name }}
                </div>
              </div>
          </div>
        </section>
      </div>
    </div>
  </section>
</template>
<script setup>
import { ref } from "vue";
import  useGlobal from '@/composables/global.ts'
const route = useRoute()
const global = useGlobal()
const store = useStateStore()


defineProps({
  scrollY: {
    type: [String,Number],
    default: 0
  }
});


let async =ref(true)

const navArr = ref([
  { path: "/",name:'home' },
  { 
    path: "/product", 
    name:'product',
    children:[
      { path: "/product/order", name:'order'},
      { path: "/product/steward", name:'steward'}
    ]
  },
  { path: "/about", name:'aboutUs' }
]);


let btnId = ref(null)
let isStyle = ref('')

let isChildren =  ref('')
let isPath = computed(() => {
  let name = 'cn'
  if(route.path.split('/')[1]){
    name = route.path.split('/')[1]
  }

  if(name==404){
    name = 'cn'
  }

  store.setState(name)

  return route.path.split(store.locale)[1] || '/'
})

const routerFn = (e) => {
  if(e.children) {
    if(store.isIPhone){
      isChildren.value = e.path
    }
    return
  }
  let fullPath =  route.path.split( store.locale )[1]
  // 去重  路径无变化，不需要跳转
  if(fullPath === e.path)return

  global.routerFn(e.path)
  asyncFn()

};

const localeFn =()=>{
  if(store.isIPhone){
    isChildren.value = 'locale'
  }
}

const isPageFn =(e,ind)=>{
  let async = false
  if(isPath.value == e.path){
    async = true
  } else if(e.children){
    async = !!e.children.filter(m => m.path == isPath.value).length
  }

  let arr = btnId.value
  if(async && arr){
    let w = 0;
    for(let i=0;i<ind;i++){
      w += arr[i].offsetWidth
    }

    isStyle.value = `left:${w}px;opacity:1;width:${arr[ind].offsetWidth}px`
  }

  return async ? 'on':''
}

// 切换中英文
const change = (e)=>{
  store.setState(e)

  let fullPath = route.fullPath
  global.routerFn(fullPath)
  asyncFn()
}


const asyncFn = ()=>{
  async.value = false;
  isChildren.value = ''

  setTimeout(()=>{
    async.value = true;
  },100)
}
</script>
<style lang="scss" scoped>
.c-head-wrap{
  min-width: 1350px;
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 22;
  &.on{
    height: 0;
    animation: boxShow .5s forwards ;
    position: sticky;
    .content-box{
      box-shadow: 0 20px 40px 0 rgba(74,91,130,.16);
      position: relative;
    }
    .head-box{
      position: relative;
      z-index: 2;
    }
    
    .back-box{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 70px;
      display: block;
      background: rgba(255,255,255,.9);
      backdrop-filter: blur(3px);
    }
  }

  &.pc{
    .nav-btn-box .btn:hover,.locale-box:hover{
      .children-box{
        display: block;
      }
    }
  }

  &.m{
    .nav-btn-box .btn.hover,.locale-box.hover{
      .children-box{
        display: block;
      }
    }
  }

}



.content-box{
  width: 100%;
  height: 70px;
  background: transparent;
  border-bottom: 1px solid #E0E4E8;
  .back-box{
    display: none;
  }
}
.main{
  height: 70px;
}
.logo-box{
  height: 100%;
  display: flex;
  align-items: center;
  margin-right: 102px;
  .img{
    width: 300px;
    height: 32px;
    object-fit: cover;
  }
}
.nav-btn-box{
  flex: 1;
  position: relative;
  .border{
    width: 72px;
    height: 2px;
    background: #0044FF;
    position: absolute;
    bottom: 0;
    transition: left 0.28s;
    opacity: 0;
  }
  
  .btn{
    font-weight: 500;
    font-size: 18px;
    color: #4F587F;
    line-height: 70px;
    padding: 0 18px;
    cursor: pointer;
    position: relative;
    font-weight: 400;
    z-index: 2;
    &.on{
      color: #0044FF;
      position: relative;
    }
    
  }
}
.locale-box{
  font-weight: 500;
  font-size: 18px;
  color: #1C1E20;
  height: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;

  
  .icon1{
    width: 22px;
    height: 22px;
    margin-right: 9px;
    background: url('@/assets/img/icon1.png') no-repeat center;
    background-size: cover;
  }

  .icon2{
    width: 24px;
    height: 24px;
    background: url('@/assets/img/icon2.png') no-repeat center;
    background-size: cover;
  }
}

.children-box{
  display: none;
  position: absolute;
  background-image: linear-gradient(197deg, rgba(246,246,246,1) , rgba(246,246,246,.65));
  backdrop-filter: blur(5px);
  box-shadow: 0 20px 40px 0 rgba(74,91,130,.16);
  border: 2px solid #fff;
  
  min-width: 100%;
  left: 50%;
  top: 70px;
  line-height: 50px;
  text-align: center;
  white-space: nowrap;
  transform: translate(-50%,0);
  font-size: 16px;
  font-weight: 400;
  color: #4F587F;
  z-index: 2;
 
  .item{
    border-bottom: 1px solid #E0E4E8;
    padding: 0 14px;

    &:last-child{
      border-bottom: 0;
    }
    &.on,&:hover{
      color: #0044FF;
    }
  }
}

@keyframes boxShow {
  0% {
    top: -70px;
  }
  100% {
    top:0px
  }
}
</style>
